<template>
    <div class="detail">
        <mt-header title="资讯详情" mtClass="no-bg" />
        <div id="detail-inner">
            <div class="inner">
                <!-- 请求提示 -->
                <my-loading :visible="loading" :reload="init" />
                <!-- 正文内容 -->
                <div class="content" v-show="info.title" id="AlloyFinger" v-finger:swipe="swipeHandler">
                    <div class="article_info">
                        <h1 class="title">{{info.title}}</h1>
                        <span class="befrom">{{info.source}}</span>
                        <span class="newstime">{{info.time}}</span>
                    </div>
                    <div class="article_content">
                        <div class="content_html" v-html='info.content'></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import mtHeader from "@/components/Header"
import myLoading from '@/components/loading'
import { getNewsInfo, postNewsRead } from '@/api/api'
export default {
    data() {
        return {
            dlb:'',
            info:{},
            readTime:1,
            swipeUpNum:0,
            loading: false
        }
    },
    components:{
        mtHeader,
        myLoading
    },
    mounted(){
        this.swipeUpNum = 0;
        this.info = {};
        this.init();
    },
    methods: {
        ...mapMutations('user', [
            'set_DLBvalue',
        ]),
        swipeHandler(e){
            // console.log("swipe" + e.direction);
            if(e.direction == 'Up'){
                this.swipeUpNum++;
            }
        },
        init(){
            this.loading = 'loading'
            getNewsInfo({
                "newId":this.$route.query.newId
            }).then(res => {
                if( res.code == 200 ){
                    this.loading = false
                    this.info = res.data;
                    if( res.data.readState == '0' ){
                        this.postStartTime();  // 未读 - 发送开始时间
                    }
                }else{
                    this.loading = 'error'
                }
            })
        },
        postStartTime(){
            postNewsRead({
                "newId":this.$route.query.newId,
                "startTime": new Date().getTime()
            }) 
        },
        postReadTime(d1,d2){
            postNewsRead({
                "newId":this.$route.query.newId,
                "endTime": new Date().getTime(),
                "slideNumber": d1 + "&" + d2
            }).then(res => {
                if( res.code == 200 ){
                    if( res.data && res.data.getDlb ){
                        this.dlb = res.data.getDlb
                    }else{
                        this.dlb = 0
                    }
                }else{
                    this.dlb = 0
                }
                this.set_DLBvalue(this.dlb)
                setTimeout(()=>{
                    this.set_DLBvalue(0)
                },2000)
            })
        }
    },
    beforeRouteLeave(to,from,next){
        var data1 = $('#detail-inner').height();
        var data2 = $('#AlloyFinger').height();
        var num = Math.ceil(data2/data1)
        // console.log(num,this.swipeUpNum);
        // 离开详情页之前发送结束时间 -- 未读
        if( this.info.readState == '0' ){
            this.postReadTime(num,this.swipeUpNum);
        }
        next()
    }
}
</script>

<style lang="stylus" scoped>
.detail{
    #detail-inner{
        height:100%;
        padding:75px 15px 0;
        .inner{
            position:relative;
            height:100%;
            overflow:scroll;
            /*解决ios上滑动不流畅*/
            -webkit-overflow-scrolling: touch;
        }
    }
}
</style>

